<template>
  <div class="serve">
    <!-- 头部 -->
    <InsideHeader :bannerType="bannerType"></InsideHeader>

    <!-- 面包屑 -->
    <!-- <crumb></crumb> -->
    <div class="crumb">
            <div class="block">  
                <div class="crumbL">
                    <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-serveList'}">服务支持</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-culCenter'}">培训中心</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-certificateW'}" class="on">证书查询</nuxt-link>
                    <div class="clear"></div>
                </div>
                <!-- <div class="crumbR">
                    <nuxt-link :to="{name: 'serve-culCenter'}">培训中心</nuxt-link>
                    <nuxt-link :to="{name: 'serve-exhibitionHallW'}">走进智能制造</nuxt-link>
                    <nuxt-link :to="{name: 'serve-callCenterW'}">Call Center</nuxt-link>
                    <nuxt-link :to="{name: 'serve-afterServiceW'}">售后服务</nuxt-link>
                    <nuxt-link :to="{name: 'serve-serveFaqW'}">FAQ</nuxt-link>
                    <nuxt-link :to="{name: 'serve-serveQuestionsW'}">问询与建议</nuxt-link>
                    <nuxt-link :to="{name: 'serve-serveAttestationW'}">认证机构查询</nuxt-link>
                    <div class="clear"></div>
                </div> -->
                <div class="clear"></div>
            </div>
        </div>


    <!-- certificateW -->
    <div class="block">
        <div class="certificateW"> 
            <!-- Ctit -->
            <div class="Ctit">
                <p>证书查询</p>
            </div>
            <div class="certificateWT">111
            </div>
            <div class="certificateWC">
                <div class="certificateWtit">
                    <p>培训证书查询</p>
                </div>
                <p class="certificateWCtit">注：仅支持查询1年之内，请尽快下载保存</p>
                <form action>
                    <div class="certificateWCF">
                        <div class="certificateWCFI">
                            <p>查询证书种类：</p>
                            <div class="certificateWCFIR">
                                <select v-model="type">
                                    <option value="0"> elearning</option>
                                </select>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="certificateWCFI">
                            <p><em>*</em>证书编号：</p>
                            <div class="certificateWCFIR">
                                <input type="text" v-model="num" class="certificateWCFIRinput"/>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="certificateWCFI">
                            <div class="certificateWCFIYzm">
                                <slide-verify :l="42"
                                            :r="10"
                                            :w="310"
                                            :h="155"
                                            @success="onSuccess"
                                            @fail="onFail"
                                            @refresh="onRefresh"
                                            :slider-text="text"
                                            ></slide-verify>
                                <!-- <div>{{msg}}</div> -->
                            </div>
                            <!-- <p>验证码：</p>
                            <div class="certificateWCFIR">
                                <input type="text" v-model="code" class="certificateWCFIRinput"/>
                            </div>
                            <div class="clear"></div> -->
                        </div>
                        <div class="certificateWCFI">
                            <div class="certificateWCFIR">
                                <button id="submit" type="button" @click="submit($event)" class="certificateWCFIRsub">确认提交</button>
                                <!-- <input type="submit" value="确认提交" class="certificateWCFIRsub"/> -->
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </form>
                <div class="certificateWCE">
                    <img src="../../static/images/certificateWCE.png" />
                    <!-- <p>证书种类：<span v-if="type==0">elearning</span></p>
                    <p>证书编号：{{num}}</p> -->
                </div>
            </div>
        </div>
    </div>
    
   
    <!-- 链接 -->
    <Insidelink></Insidelink>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/home.css";
import "@/assets/css/serve.css";
import InsideHeader from "@/components/head";
import HomeHooter from "@/components/footer";
import crumb from "@/components/crumb";
import Insidelink from "@/components/link"; 
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);

export default {
  name: "certificateW",
  data() {
    return {
        type:-1,//证书种类
        num:"",//证书编号
        code:"",//验证码
        bannerType:'certificateW',
        msg: '',
        text: '向右滑',
    };
  },
  components: {
    InsideHeader,
    HomeHooter,
    crumb,
    Insidelink
  },
  methods: {
    submit(e) {
        var type = this.type; //证书种类
        var num = this.num; //证书编号
        var msg = this.msg; //验证码
        if (!type || type == null) {
            alert("证书种类没有选择");
            return false;
        }
        if (!num || num == null) {
            alert("证书编号没有输入");
            return false;
        }
        if (!msg || msg == null) {
            alert("请拼合正确验证码");
            return false;
        }
        $(".certificateWCF").hide();
        $(".certificateWCE").show();
    },

    onSuccess(){
        this.msg = 'login success'
    },
    onFail(){
        this.msg = ''
    },
    onRefresh(){
        this.msg = ''
    },
    
  },
};
</script>

<style scoped>
</style>